<template>
	<view v-if="userInfo" class="page page-rights">
		<!-- 个人信息 -->
		<view class="rights-top" style="background-image: url(https://static.newbeaconhotels.com/app/D2103-business-js/my/rights-top.png);">
			<view class="rights-personal bg-cover" :style="{backgroundImage: 'url(' + imgPath + userInfo.user.card_bg + ')'}">
				<view class="part1 flex-row-start">
					<view v-if="userInfo.user" class="bg-cover photo" :style="{backgroundImage: 'url(' + userInfo.user.avatar + ');border-color: ' + userInfo.user.avatar_color + ';'}">
						<image class="level" mode="heightFix" :src="imgPath + userInfo.user.card_ico"></image>
					</view>
					<view class="info">
						<view class="font18">{{userInfo.user.my_level}}会员</view>
						<view class="font11">{{userInfo.user.name}} {{userInfo.user.mobile}}</view>
					</view>
				</view>
				<view v-show="false" class="part2">
					<view class="flex-row-between" @click="goNext('/pages/my/growth')">
						<view class="progress">
							<view class="inner" :style="{width: percent + '%'}"></view>
						</view>
						<view class="font10">成长值 {{info.score2}} / {{info.score1}}</view>
						<uni-icons type="arrowright" size="9" color="#786b53"></uni-icons>
					</view>
					<view class="font10">再获得{{info.score1 - info.score2}}成长值即可升级</view>
				</view>
			</view>
		</view>
		<view class="rights-p font16 font-b">会员特权</view>
		<!-- 权益tab -->
		<view class="rights-tab box-shadow">
			<v-tabs
				v-model="tabCurrent"
				:scroll="false"
				:tabs="tabs"
				color="#646464"
				activeColor="#1e1e1e"
				fontSize="28rpx"
				height="52rpx"
				lineHeight="5rpx"
				lineColor="#03004c"
				lineScale="0.3"
				@change="changeTab"
			></v-tabs>
			<view class="rights-tab-con">
				<swiper class="rights-swiper" :current="swiperCurrent" :style="{height: swiperHeight + 'px'}" @animationfinish="animationFinished">
					<swiper-item class="rights-swiper-item" v-for="(tab, index) in tabs" :key="index">
						<view :id="'list' + index" class="rights-list flex-row-start flex-start">
							<view v-for="(item, j) in rights[index]" :key="j" class="rights-item tc">
								<image class="rights-img" :src="imgPath + item.ico"></image>
								<view class="rights-title font12">{{item.title}}</view>
								<view class="rights-sub font10 font-646464">{{item.info2}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgPath: this.$Config.http_static, // 图片头
				userInfo: null,
				info: {
					score1: 1000,
					score2: 500
				},
				tabs: [],
				tabCurrent: 0,
				swiperCurrent: 0,
				swiperHeight: 0,
				rights: []
			}
		},
		computed: {
			// 进度条的百分比
			percent () {
				let diff = parseFloat(this.info.score2 / this.info.score1).toFixed(2)
				return diff * 100
			}
		},
		mounted() {
			console.log('1')
		},
		onLoad() {
			// 获取用户信息
			this.$Http({
				url: 'user',
				token: true,
				load: true
			}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
					
					// 获取会员卡信息
					this.$Http({
						url: 'card',
					}).then(res => {
						if (res.code == 1) {
							let arr1 = []
							let arr2 = []
							res.data.forEach((item, index)=>{
								arr1.push(item.name + '会员')
								arr2.push(item.equityList)
								
								if (this.userInfo.user.my_level == item.name) {
									this.tabCurrent = index
									this.swiperCurrent = index
								}
							})
							this.tabs = arr1
							this.rights = arr2
							
							setTimeout(()=>{
								this.initSwiperHeight('#list0');
							}, 500)
						} else {
							uni.showToast({title: res.msg, icon: none})
						}
					});
				}
			});
		},
		methods: {
			changeTab(index) {
				this.swiperCurrent = index
			},
			animationFinished(e) {
				this.tabCurrent = e.detail.current
				this.swiperCurrent = e.detail.current
				this.initSwiperHeight('#list' + e.detail.current);
			},
			initSwiperHeight(list){
				let _this = this;
				let info = uni.createSelectorQuery().select(list);
				info.boundingClientRect(function(data) {
					console.log('data:' + data)
					_this.swiperHeight = data.height;
				}).exec();
			},
			// 路由跳转: tag默认false,tag=true跳到tabBar页面
			goNext (url, tag) {
				if (tag) {
					uni.switchTab({ url: url });
				} else {
					uni.navigateTo({ url: url });
				}
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
</style>
